import QtQuick
import QtQuick.Controls
import QtQuick.Window
import Qt5Compat.GraphicalEffects

Item {
    id: root
    anchors.fill: parent

    property string backgroundImage: "../image/anim/AcquireRanksBg.png"
    property string photoImage: "../image/mark/@!glory_days_xiaozu.png"
    property string textContent: "0"
    property color textColor: "#b9fb2a"
    property int textPixelSize: 40

    property real startY: height * 0.15
    property real endY: height * 0.05

    Item {
        id: container
        width: bgImage.width
        height: photo.height
        anchors.horizontalCenter: parent.horizontalCenter
        y: startY
        scale: 0.7
        opacity: 0

        Image {
            id: bgImage
            source: root.backgroundImage
            width: 389
            height: 49
        }

        Image {
            id: photo
            source: root.photoImage
            height: bgImage.height * 1.6
            fillMode: Image.PreserveAspectFit
            anchors {
                left: bgImage.left
                leftMargin: 66
                verticalCenter: bgImage.verticalCenter
            }
        }

        Text {
            id: textItem
            text: root.textContent
            color: root.textColor
            font {
                pixelSize: root.textPixelSize
                family: fontSimkai.name
                bold: true
            }
            style: Text.Outline
            styleColor: "#285400"
            anchors {
                left: bgImage.left
                leftMargin: 266
                verticalCenter: bgImage.verticalCenter
            }
        }
    }

    SequentialAnimation {
        id: animationSequence
        onStarted: {
            container.y = startY;
            container.opacity = 0;
        }
        ParallelAnimation {
            PropertyAnimation {
                target: container
                property: "y"
                to: endY
                duration: 800
                easing.type: Easing.OutCubic
            }
            PropertyAnimation {
                target: container
                property: "opacity"
                to: 1
                duration: 800
            }
        }
        PauseAnimation { duration: 1000 }
        PropertyAnimation {
            target: container
            property: "opacity"
            to: 0
            duration: 500
        }
    }

    function playAnimation() {
        animationSequence.start();
    }

    FontLoader {
        id: fontSimkai
        source: "../fonts/simkai.ttf"
    }
    
    // 加载数据并开始动画
    function loadData(data) {
        if (data.rank) photoImage = "../image/mark/@!glory_days_" + data.rank + ".png";
        if (data.num) textContent = "" + data.num;
        
        playAnimation();
    }
}